<template>
  <div class="bottom-pie" ref="target"></div>
</template>

<script setup>
import { onMounted, ref, defineProps, watch } from "vue";
import * as echarts from "echarts";
const props = defineProps({
  A: {
    type: Number,
    required: true,
  },
  B: {
    type: Number,
    required: true,
  },
  C: {
    type: Number,
    required: true,
  },
});
const target = ref(null);
let mChart = null;
onMounted(() => {
  mChart = echarts.init(target.value);
  renderChart();
});

const renderChart = () => {
  let options = {
    title: {
      text: "正常用户三相电压环比图",
      textStyle: {
        color: "#fff",
        fontSize: "20",
      },
      left: 20,
      top: 20,
    },
    tooltip: {
      trigger: "item",
    },
    legend: {
      orient: "vertical",
      top: "20%",
      right: "20%",
      textStyle: {
        color: "#fff",
        fontSize: "20",
      },
    },
    series: [
      {
        name: "",
        type: "pie",
        radius: ["50%", "70%"],
        center: ["30%", "50%"],
        avoidLabelOverlap: false,
        padAngle: 5,
        itemStyle: {
          borderRadius: 10,
        },
        label: {
          show: false,
          position: "center",
          formatter: "{d}%",
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 40,
            fontWeight: "bold",
          },
        },
        labelLine: {
          show: false,
        },
        data: [
          { value: props.A, name: "A相" },
          { value: props.B, name: "B相" },
          { value: props.C, name: "C相" },
        ],
      },
    ],
  };
  mChart.setOption(options);
};
window.addEventListener("resize", function () {
  mChart.resize();
});
watch(
  () => props.A,
  () => {
    renderChart();
  }
);
</script>

<style lang="scss" scoped>
.bottom-pie {
  width: 100%;
  height: 100%;
}
</style>
